<!--
 * @Author: chy
 * @Date: 2022-08-25 09:36:59
 * @LastEditors: chy
 * @LastEditTime: 2023-07-07 16:09:11
 * @Description: 当内容文字超出后显示popover框，
		注意：在table中使用此插件必须把当前列的width写死
-->
<template>
	<div id="cpn-popover-field" :style="{ width: width, maxWidth: maxWidth }">
		<el-popover placement="top-start" :trigger="trigger" :disabled="!isShow">
			<div :style="{ width: popWidth, maxWidth: popMaxWidth }">{{ value }}</div>
			<div slot="reference" class="chyBox" id="btBox" :style="{ lineClamp: line }">{{ value || '--' }}</div>
		</el-popover>
	</div>
</template>

<script>
export default {
	name: 'popover-field',
	props: {
		value: {
			typeof: String,
			required: true,
			default: ''
		},
		line: {
			typeof: Number,
			default: 1
		},
		trigger: {
			typeof: String,
			default: 'hover'
		},
		// 指定内容的宽度
		width: {
			typeof: String,
			default: ''
		},
		// 指定内容的最大宽度
		maxWidth: {
			typeof: String,
			default: ''
		},
		// 指定浮窗内容的宽度
		popWidth: {
			typeof: String,
			default: ''
		},
		// 指定浮窗内容的最大宽度
		popMaxWidth: {
			typeof: String,
			default: ''
		}

	},
	watch: {
		value(newVal) {
			this.handlePage()
		}
	},
	data() {
		return {
			isShow: false
		}
	},
	mounted() {
		this.handlePage()
	},
	methods: {
		handlePage() {
			this.$nextTick(() => {
				const textNode = this.$el.getElementsByClassName('chyBox')[0]
				// console.log(2333, textNode, this.$el)
				// console.log(2333, textNode.scrollHeight, this.$el.offsetHeight)
				if (textNode.scrollHeight > this.$el.offsetHeight) {
					this.isShow = true
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
#cpn-popover-field {
	white-space: normal !important;

	.chyBox {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box !important; //将对象作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; // 从上到下垂直排列子元素
		box-sizing: border-box;
		cursor: pointer;
	}
}
</style>